<script setup lang="ts">
import { defineVaDataTableColumns } from 'vuestic-ui'
import { MineData, MineStatus } from '../a_DataMine/types'
import UserPhoto from '../../components/UserPhoto.vue'
import ProjectStatusBadge from '../a_ProjectMine/components/ProjectStatusBadge.vue'
import { useMineData } from '../a_DataMine/composables/useMineData'
import { Pagination } from '../../data/pages/projects'
import { ref } from 'vue'

const pagination = ref<Pagination>({ page: 1, perPage: 7, total: 0 })
const { mineData, isLoading, sorting } = useMineData({
  pagination,
})

// ???
const avatarColor = (userName: string) => {
  const colors = ['primary', '#FFD43A', '#ADFF00', '#262824', 'danger']
  const index = userName.charCodeAt(0) % colors.length
  return colors[index]
}
const statusText: Record<MineStatus, string> = {
  '': '',
  public: '公开',
  private: '私有',
  deleted: '已删除',
}
const statusColors: Record<MineStatus, string> = {
  '': '',
  public: 'info',
  private: 'warning',
  deleted: 'danger',
}
const columns = defineVaDataTableColumns([
  { label: '样本名称', key: 'name', sortable: true },
  { label: '状态', key: 'status', sortable: false },
  { label: '描述', key: 'description', sortable: false },
])
</script>

<template>
  <VaCard>
    <VaCardTitle class="flex items-start justify-between">
      <h1 class="font-bold uppercase card-title text-secondary">自有数据</h1>
      <VaButton preset="primary" size="small" to="/data/mine">进入</VaButton>
    </VaCardTitle>
    <VaCardContent>
      <div v-if="mineData.length > 0">
        <VaDataTable
          v-model:sort-by="sorting.sortBy"
          v-model:sorting-order="sorting.sortingOrder"
          :items="mineData"
          :columns="columns"
          :loading="isLoading"
        >
          <template #cell(name)="{ rowData }">
            <div style="font-weight: bolder" lass="ellipsis max-w-[230px] lg:max-w-[450px]">
              {{ rowData.name }}
            </div>
          </template>
          <template #cell(status)="{ rowData }">
            <VaBadge :text="statusText[rowData.status]" :color="statusColors[rowData.status as MineStatus]" />
          </template>
        </VaDataTable>
      </div>
      <div v-else class="p-4 flex justify-center items-center text-[var(--va-secondary)]">No Data</div>
    </VaCardContent>
  </VaCard>
</template>
